<template>
	<s-layout title="有奖竞猜">
		<view class="bg">
			<view class="ctenter">
				<!-- <image class="imgicon" src="../../static/img/Awards/awardsI.png" mode=""></image> -->
				<view class="" v-for="(item,i) in stats.team_name" :key="item.id">
					<view class="title">
						<view class="name">{{item.name}}</view>
						<view class="hint">选择你心目中的冠军队伍（单选）</view>
					</view>
					<view class="team">
						<view class="teamBox" v-for="(duiwu, index) in item.duiwu"
							:style="{ backgroundColor: duiwu.state ? '#ffe7d8' : '#f4f4f4' }" :key="index"
							:class="{'ying_duiw': duiwu.id == item.winner_team_id}" @click="pitch(item,duiwu.id)">
							{{duiwu.name }}
							<text style="margin-left: 25rpx; font-size: 26rpx;"
								:style="{ color: duiwu.state ? '#ed7f49' : '#e9e9e9' }" class="iconfont"
								v-if="duiwu.state"> &#xe619; </text>
							<text style="margin-left: 25rpx; font-size: 26rpx;"
								:style="{ color: duiwu.state ? '#ed7f49' : '#e9e9e9' }" class="iconfont" v-else>
								&#xe815; </text>
						</view>
					</view>
					<button :disabled="yanzheng(item)?yanzheng(item):item.state" class="btn-btn" type="primary"
						size="mini" @click="xuanze(item)">选择队伍</button>
				</view>

				<view class="bottom">
					<view class="box">
						<view class="box1">必须是会员才能参加</view>
						<view class="box2">猜对的用户赠送一张礼卷和对应的积分</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>

</template>

<script setup>
	import {
		baseUrl
	} from '@/sheep/config';
	import Request from 'luch-request';
	import {
		reactive,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onShow
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		forIn
	} from 'lodash';
	const stats = reactive({
		integral: 55, //积分
		event_id: 0,
		team_id: 0,
		team_name: []
	})

	function yanzheng(data) {
		let statss = false;
		data.duiwu.forEach(item => {
			if (data.user_select != null && data.user_select.team_id == item.id) {
				statss = true;
			}
		});
		return statss
	}

	// 选择
	async function xuanze(item) {
		if (!stats.event_id || !stats.team_id) {
			return uni.showToast({
				title: "请先选择队伍",
				icon: "error"
			})
		}
		let res = await uni.request({
			url: `${baseUrl}/api/index/addvictory`, //仅为示例，并非真实接口地址。
			data: {
				user_id: sheep.$store('user').userInfo.id,
				event_id: stats.event_id,
				team_id: stats.team_id,
			},
		});
		let {
			data,
			code,
			msg
		} = res.data;
		if (code) {
			stats.event_id = 0;
			stats.team_id = 0;
			item.state = true;
			item.forbid = true;
			uni.showToast({
				title: msg,
				icon: "success"
			})
			getData();
		}
	}

	//选中的队伍 
	function pitch(data, id) {
		if (data.forbid) return;
		stats.event_id = data.id;
		stats.team_id = id;
		let num = 0;
		data.duiwu.forEach((item, index) => {
			item.state = false;
			if (item.id == id) {
				num = index
			}
		})
		data.duiwu[num].state = true;
	}

	async function getData() {
		let res = await sheep.$api.user.activity();
		let {
			code,
			data
		} = res;
		if (code) {
			let arr = data;
			for (let i = 0; i < arr.length; i++) {
				arr[i].state = false;
				for (let j = 0; j < arr[i].duiwu.length; j++) {
					arr[i].duiwu[j].state = false;
					if(arr[i].user_select != null)
					{
						if (arr[i].user_select.team_id == arr[i].duiwu[j].id) {
							arr[i].duiwu[j].state = true;
							arr[i].forbid = true;
						}
					}
					
				}
			}
			stats.team_name = data;
		}
	}
	onShow(() => {
		getData();
	})
</script>

<style>
	.bg {
		width: 100vw;
		height: calc(100vh - 64px);
		background-color: #f4f4f4;
		overflow: hidden;
	}

	.ctenter {
		width: 700rpx;
		height: 100%;
		background-color: #ffffff;
		margin: 20rpx auto;
		border: 1rpx solid #fff;
		border-radius: 20rpx;
		position: relative;
	}

	.imgicon {
		display: block;
		width: 144rpx;
		height: 40rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.title {
		text-align: center;
		width: 700rpx;
		margin-top: 50rpx;
		height: 100rpx;
	}

	.bg .name {
		width: 700rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.bg .hint {
		font-size: 20rpx;
		color: #999999;
	}

	.bg .team {
		height: calc(100% - 300rpx);
		padding: 0 5rpx;
		overflow-y: scroll;
		/* display: flex;
		justify-content: space-between;
		align-content: flex-start;
		flex-wrap: wrap; */
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: 20rpx;
		column-gap: 20rpx;
		justify-content: space-between;
	}

	.bg .team .teamBox {
		padding: 10rpx;
		margin: 5rpx 0;
		border-radius: 5rpx;
		background-color: #f4f4f4;
		font-size: 28rpx;
		color: #666666;
		height: 30rpx;
		line-height: 30rpx;
	}

	.bg .bottom {
		height: 149rpx;
		border-top: 1rpx solid #f4f4f4;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #999999;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.bg .bottom .box {
		width: 100%;
		height: 60rpx;
	}

	.ying_duiw {
		color: red !important;
	}

	.btn-btn {
		margin-top: 15rpx;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
</style>